<template>
    <el-card shadow="never" style="margin-bottom: 14px;">

        <el-page-header :icon="ArrowLeft" @back="onBack">
            <template #content>
                <span v-if="$route.params._id" class="text-large font-600 mr-3">
                    编辑商品
                </span>
                <span v-else class="text-large font-600 mr-3"> 商品添加 </span>
            </template>
        </el-page-header>

    </el-card>





    <el-card shadow="never" :body-style="{ paddingTop: 0 }">

        <el-tabs v-model="activeTab">
            <el-tab-pane v-for="(item, index) in tabsdata" :label="item.label" :name="index" :key="index">
                <component v-model="productItem" :is="item.children"></component>
            </el-tab-pane>
        </el-tabs>
        <div>
            <el-button @click="activeTab--">上一步</el-button>
            <el-button @click="activeTab++">下一步</el-button>
        </div>



    </el-card>
</template>

<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import api from '@/api';
import Baseinfo from './componentsd/Baseinfo.vue';
import Stockinfo from './componentsd/Stockinfo.vue';
import Detaillnfo from './componentsd/Detaillnfo.vue';
 import { productitem} from '@/api/modules/products';
let router = useRouter();
const route = useRoute();
console.log(route.query);

let activeTab = ref(0)
//新增或修改的商品对象
let productItem = ref<productitem>({})
//tabs标签页的面板数据

let tabsdata = [
    { label: '基础信息', children: Baseinfo },
    { label: '库存规格', children: Stockinfo },
    { label: '商品详情', children: Detaillnfo },
]


onMounted(() => {
    getdetailbayid()
})
//通过商品—id来获取商品完整信息
let getdetailbayid = () => {
    if (route.params._id) {
        api.products.getDetail({
            _id: route.params._id as string
        }).then(res => {
            console.log(res);
if(res.code==200){
    productItem .value=res.data
}
        })

    }

}







let onBack = () => {

    router.back();//router.go(-1)

}












</script>

<style scoped></style>